<template xmlns:v-lazy="http://www.w3.org/1999/xhtml">
  <w-cell
    :hover="hover"
    :operation-width="operationWidth"
    class="com-global-cell-00"
    @click.native="cellClick"
  >
    <w-image :url="icon" class="left-img" width="100" height="100" />
    <div class="text-box w-flex-between">
      <p class="title text w-text-line-1 hover-color">
        <span
          :class="{ 'w-hover-text': link, 'w-pointer': link }"
          @click.stop="linkClick"
        >
          {{ title }}
        </span>
      </p>
      <p class="describe text w-text-line-1 hover-color">
        <span>{{ describe }}</span>
        <span v-if="describe1">&nbsp;|&nbsp;</span>
        <span>{{ describe1 }}</span>
      </p>
      <p class="detil text w-text-line-2 hover-color">
        {{ detail }}
      </p>
    </div>
    <template slot="option">
      <slot name="option" />
    </template>
  </w-cell>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import WCell from '@/components/global/cell'

@Component({
  name: 'ComGlobalCell00',
  components: {
    WCell
  }
})
export default class ComGlobalCell00 extends Vue {
  // 左侧图片
  @Prop({ type: String, default: '' }) icon!: string
  // 标题
  @Prop({ type: String, default: '' }) title!: string
  // 点击标题调换的url
  @Prop({ type: String, default: '' }) link!: string
  // 详情
  @Prop({ type: String, default: '' }) detail!: string
  // 描述
  @Prop({ type: String, default: '' }) describe!: string
  @Prop({ type: String, default: '' }) describe1!: string
  // 操作宽度
  @Prop({ type: Number, default: 0 }) operationWidth!: number
  // 是否允许Hover
  @Prop({ type: Boolean, default: true }) hover!: boolean

  /**
   * 链接点击
   */
  linkClick () {
    if (this.link) {
      window.open(this.link)
    } else {
      this.cellClick()
    }
  }

  /**
   * cell 点击
   */
  cellClick () {
    this.$emit('cellClick')
  }
}

</script>

<style lang="less" scoped>
.com-global-cell-00 {
  height: 120px;
  padding-left: 120px !important;
  > .left-img {
    position: absolute;
    left: 10px;
    top: 10px;
    background-color: #fff;
  }

  > .text-box {
    flex-direction: column;
    height: 100%;
    .text {
      margin: 0;
    }
    .title {
      font-size: 18px;
      color: #555;
    }
    .describe {
      color: #999;
      font-size: 14px;
    }
    .detil {
      height: 46px;
      font-size: 16px;
      color: #666;
      line-height: 24px;
    }
  }
}
</style>
